<template>
    <div>
        App...
        <!-- 1. 标签属性传数据 -->
        <Child :num="num" :person="person"/>
        <Son :num="num" :setNum="setNum"/>
    </div>
</template>

<script>
import Child from "./Child.vue";
import Son from "./Son.vue"
/*
  props
    功能：父子组件传递数据
      父 -> 子 传递普通数据
      子 -> 父 （父组件传递函数给子组件，子组件调用函数从而修改父组件数据）

    使用：
      1. 父组件以标签属性方式传递数据给子组件
        <Child :xxx="xxx" />
      2. 子组件声明接受数据（三种方式）
        props: ['xxx']
        props: { xxx: Number }
        props: { xxx: { type: Number, required: true } }
      3. 子组件使用数据
        this.xxx

    特点：只读的，不能直接修改。（想要修改 1. 先在数据源定义更新数据方法 2. 再将方法传递过来从而调用方法修改数据）
*/
export default {
   name:"App",
   data(){
    return {
        num: 0,
        person:{
            name: "lisa",
            age: "38"
        },
    };
   },
   methods:{
    // 数据源中定义更新数据的方法
    setNum(){
      this.num++;
    },
   },
   components: {
    Child,
    Son,
   }
}
</script>
<style>

</style>
